<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable no-unused-vars -->
<script setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'
import { useI18n } from 'vue-i18n'
import { Language } from '@/store/i18n.js'
import { Theme } from '@/store/ThemeModel.js'
import Rocket from '@/components/RightSide/Rocket.vue'

const app = getCurrentInstance()
const { dayjs } = app.appContext.app.config.globalProperties

const { t } = useI18n()

const _data = reactive({
  langList: [
    { name: '🇨🇳 简体中文', mode: 'zh-cn' },
    { name: '🇭🇰 繁体中文', mode: 'zh-tw' },
    { name: '🇯🇵 日本語', mode: 'ja' },
    { name: '🇺🇸 English', mode: 'en' }
  ],
  modeList: [
    { name: t('common.Auto'), icon: 'czs-bot', mode: 'auto' },
    { name: t('common.Light'), icon: 'czs-sun', mode: 'light' },
    { name: t('common.Dark'), icon: 'czs-moon', mode: 'dark' }
    // { name: 'Relax', icon: 'czs-eye', mode: 'relax' },
  ]
})

const Lang = new Language()
const theme = new Theme()

onMounted(() => {
  console.log('dayjs.locale:', dayjs.locale())
})
</script>

<template>
  <footer id="footer">
    <div class="d-flex flex-center justify-between flex-wrap">
      <div class="left">
        <!-- <span>© 2024 <a href="https://biji.io">设计笔记</a></span> -->
      </div>
      <div class="right">
        <span>Theme by <a href="https://biji.io" target="_blank" class="theme-name">Wing</a></span>
      </div>
    </div>
    <div class="text-center text-tiny mt-2 w-100" style="opacity: 0.2"></div>
    <div class="scroll-tools mr-2" :class="[{ show: true }]">
      <div hover-show="" perspective="" class="dropdown">
        <a
          tabindex="0"
          class="btn btn-link btn-action uni-bg bg-blur uni-shadow dropdown-toggle flex-center"
          ><i class="czs-clothes-l"></i
        ></a>
        <ul class="menu menu-left mode-switch uni-card uni-bg bg-blur uni-shadow text-center">
          <li class="menu-item" v-for="(item, index) in _data.modeList" :key="index">
            <a data-mode="auto" class="flex-center" @click="theme.set(item.mode)">
              <i :class="['mr-1', item.icon]"></i>{{ item.name }}
            </a>
          </li>
        </ul>
      </div>
      <div style="height: 0.4rem"></div>
      <div hover-show="" perspective="" class="dropdown">
        <a
          tabindex="0"
          class="btn btn-link btn-action uni-bg bg-blur uni-shadow dropdown-toggle flex-center"
        >
          <i class="czs-earth"></i>
        </a>
        <ul class="menu menu-left mode-switch uni-card uni-bg bg-blur uni-shadow">
          <li class="menu-item" v-for="(item, index) in _data.langList" :key="index">
            <a @click="Lang.set(item.mode), $dayjs.locale(item.mode)" class="flex-center"
              ><i class="mr-1"></i>{{ item.name }}</a
            >
          </li>
        </ul>
      </div>
      <div style="height: 0.4rem"></div>
      <Rocket />
    </div>
  </footer>
</template>

<style scoped></style>
